<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库编码" style="margin-right:15px" prop="name">
              <el-input v-model="form.name" placeholder="请输入仓库编码" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库名称" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入仓库名称" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="所属仓库" style="margin-right:15px" prop="warehouseCode">
              <el-select v-model="form.warehouseCode" placeholder="请选择所属仓库" @change="findwarehouseSpaceList" style="width: 100%">
                <el-option v-for="item in warehouseList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库类型" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入仓库类型" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系人" style="margin-right:15px" prop="name">
              <el-input v-model="form.name" placeholder="请输入联系人" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="联系人电话" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入联系人电话" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="手机号" style="margin-right:15px" prop="name">
              <el-input v-model="form.name" placeholder="请输入手机号" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="传真" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入传真" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="邮箱" style="margin-right:15px" prop="name">
              <el-input v-model="form.name" placeholder="请输入邮箱" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="坐标" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入x坐标" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item  style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入y坐标" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库地址"  prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="国家" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple" >
            <el-form-item  prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="省" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item  prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="市" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item  prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="区" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item  prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="请输入仓库详细地址" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" style="margin-right:15px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入备注" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import request from '@/utils/request'
Vue.use(VXETable)
export default {
  name: 'Child',
  data() {
    return {
      form: {
        code: '',
        name: '',
        serialNumber: '',
        warehouseCode: '',
        spaceCode: ''
      },
      warehouseSpaceList:[],
      warehouseList:[]
    }
  },
  created() {
    this.findwarehouseSpaceList()
    this.findWarehouseList()
  },
  methods: {
    // 查询库区
    findwarehouseSpaceList() {
      request({ url: `/ntocc-wms-api/warehouseSpace`, method: 'get', params: { 'warehouseCode': this.form.warehouseCode }}).then(response => {
        this.warehouseSpaceList = response.data.records
      })
    },
    // 查询仓库
    findWarehouseList() {
      request({ url: `/ntocc-wms-api/warehouse`, method: 'get' }).then(response => {
        this.warehouseList = response.data.records
      })
    },
    // 翻译库区类型
    formatterwarehouseSpace(cellValue) {
      const sd = this.warehouseSpaceList.find(i => i.code === cellValue)
      return sd ? sd.name : ''
    },
    // 翻译仓库类型
    formatterWarehouse(cellValue) {
      const sd = this.warehouseList.find(i => i.code === cellValue)
      return sd ? sd.name : ''
    },
    // 获取页面信息
    getInfo(code) {
      request({ url: `/ntocc-wms-api/warehouseLocation/${code}`, method: 'get' }).then(response => {
        this.form = response.data
        this.form.warehouseCode = this.formatterWarehouse(this.form.warehouseCode)
        this.form.spaceCode = this.formatterwarehouseSpace(this.form.spaceCode)
        this.$message({ message: response.msg, type: 'success' })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    .dialog-footer {
        margin-top: 50px;
    }
</style>
